<template>
  <div class="box-container">
    <header class="title pl-4 relative h-[44px] flex items-center">
      <div v-if="title" class="flex gap-2 items-center">
        <img src="@/assets/images/box-icon.png" style="width: 20px; height: 20px" />
        {{ title }}
      </div>
      <div class="flex-1 h-full text-sm">
        <slot name="headerBtns"></slot>
      </div>
    </header>
    <div style="background-color: rgba(160, 175, 196, 0.2); width: 100%; height: 1px"></div>
    <footer
      ref="tableContent"
      class="pt-3 pb-2"
      :class="bodyPX"
      style="height: calc(100% - 45px); overflow-y: auto"
    >
      <a-table
        ref="tableRef"
        :data-source="dataSource"
        :columns="tableColumns"
        :size="size"
        :row-key="rowKey"
        :pagination="pagination"
        :scroll="scroll"
        :row-selection="rowSelection"
        bordered
        v-bind="otherOptions"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'operation'">
            <slot name="tableBtns" :record="record" :index="index"></slot>
          </template>
        </template>
        <template #headerCell="scoped">
          <template v-for="customColumn in tableColumns" :key="customColumn.headerCell">
            <template v-if="scoped.column.headerCell === customColumn.headerCell">
              <slot :name="customColumn.headerCell" :scoped="scoped"></slot>
            </template>
          </template>
        </template>
      </a-table>
    </footer>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dataSource: {
    type: Array,
    default: () => {
      return []
    }
  },
  columns: {
    type: Array,
    default: () => {
      return []
    }
  },
  size: {
    type: String,
    default: 'small'
  },
  rowKey: {
    type: String,
    default: 'id'
  },
  rowSelection: {
    type: Object,
    default: () => {
      return null
    }
  },
  paginationConfig: {
    type: [Object, Boolean],
    default: () => {
      return {}
    }
  },
  otherOptions: {
    type: Object,
    default: () => ({})
  },
  bodyPX: {
    type: String,
    default: 'px-4'
  },
  otherHeight: {
    type: Number,
    default: 120
  },
  scrollFlag: {
    type: Boolean,
    default: true
  }
})
const tableColumns = computed(() => {
  return props.columns.map((item) => {
    if (!item?.align) {
      item.align = 'center'
    }
    item.ellipsis = true
    return item
  })
})
const emit = defineEmits(['update:currentRow', 'getMultipleSelectionRow', 'update:page'])

const pagination = computed(() => {
  if (props.paginationConfig === false) {
    return false
  }
  return {
    current: props.paginationConfig?.current
      ? props.paginationConfig?.current
      : props.paginationConfig?.pageNo
      ? props.paginationConfig?.pageNo
      : 1,
    pageSize: props.paginationConfig?.pageSize ? props.paginationConfig?.pageSize : 20,
    pageSizeOptions: props.paginationConfig.pageSizeOptions ?? ['10', '20', '30'],
    showQuickJumper: true,
    showSizeChanger: true,
    showTotal: (total, range) => {
      return range[0] + '-' + range[1] + ' 共' + total + '条'
    },
    total: props.paginationConfig.total ? props.paginationConfig?.total : 0,
    hideOnSinglePage: true
  }
})

const handleTableChange = (paginationInfo) => {
  emit('update:page', paginationInfo.current, paginationInfo.pageSize)
}

const tableContent = ref()
const tableRef = ref()
const scroll = computed(() => {
  if (props.scrollFlag) {
    let height = props.otherHeight ? props.otherHeight : 120
    if (pagination.value.pageSize > pagination.value.total) {
      height -= 50
    }
    return { y: tableContent.value?.offsetHeight - height }
  }
  return null
})
</script>

<style lang="less" scoped>
.box-container {
  background: linear-gradient(0deg, #ffffff, #e8f0fa);
  border: 1px solid #e6ebf1;
  box-shadow: 0px 2px 3px 0px rgba(184, 184, 184, 0.45);
  height: 100%;
  .title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #393940;
    line-height: 40px;

    .blue-line {
      position: absolute;
      width: 32px;
      height: 6px;
      background: #4974f7;
      border-radius: 3px;
    }
  }
}
</style>
